<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/commons/jsp-head.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>select component</title>
<%@ include file="/commons/html-head-easyui.jsp" %>
<script type="text/javascript">
	$(function(){

		var $etool_select = $("[type='etool_select']");
		var optionData="";
		
		//获取data属性
		var data=$etool_select.attr("data");
		var jsonData = jQuery.parseJSON(data);
		if(jsonData!=undefined && jsonData.data!=null)
		{
			optionData=jsonData.data
		}
		
		//获取url属性
		var url=$etool_select.attr("url");
		if(jsonData==undefined && url!=undefined && url!="")
		{
			$.ajax({  
		        async:false,  //异步或是同步，默认为异步  
		        url:url,  
		        type:"post",  
		        dataType:"json",  
		        success:function(data){  
		        	optionData=data.data;
		        }  
		    });  
		}
		
	    //拼装option
		var optonhtml="";
		$.each(optionData,function(i_key,item){
			optonhtml=optonhtml+"<option value='"+item["value"]+"'>"+item["name"]+"</option>"
		})
		$etool_select.empty().append(optonhtml);
		
		etool_select_change($(this));
		
		//子集
		var subSelectId=$etool_select.attr("subSelectId");
		if(subSelectId!=undefined && subSelectId!=null)
		{
			$etool_select.bind("change",function(){
				etool_select_change($(this));
			})
		}
	})
	
	function etool_select_change(select)
	{
		var $select=select;
		var value=$select.val();

		var subSelectUrl=$select.attr("subSelectUrl");
		var subSelectData=jQuery.parseJSON($select.attr("subSelectData"));
		var subSelectId=$select.attr("subSelectId");
		var subSelectOption=""
		if(subSelectData!=undefined)
		{
			subSelectOption=subSelectData.data;
		}
		if(subSelectData==undefined && subSelectUrl!=undefined && subSelectUrl!="")
		{
			$.ajax({  
		        async:false,  //异步或是同步，默认为异步  
		        url:subSelectUrl,  
		        type:"post",  
		        dataType:"json",  
		        success:function(data){  
		        	subSelectOption=data.data;
		        	$select.attr("subSelectData",JSON.stringify(data))
		        }  
		    });  
		}
		
		var subOptonhtml="";
		$.each(subSelectOption,function(i_key,item){
			if(item["parentValue"]==value)
			{
				subOptonhtml=subOptonhtml+"<option value='"+item["value"]+"'>"+item["name"]+"</option>"
			}
		})
		$("#"+subSelectId).empty().append(subOptonhtml);
	}

</script>
</head>
<body>
	<select type="etool_select" url="/json-data.action" subSelectId="tt1" subSelectUrl="/json-data-2.action">
	</select>
	
	<select id="tt1">
	</select>
</body>
</html>